/**
 * Sample React Native App
 * https://github.com/facebook/react-native
 * @flow
 */

import React, {Component} from 'react';
import {
    StyleSheet,
    Text,
    ListView,
    Image,
    View
} from 'react-native';

var arrData = require('../data/test.json');
var arrImage = require('../data/data');

export default class ListViewDemo extends Component {
    constructor() {
        super();
        var ds = new ListView.DataSource({rowHasChanged: (r1, r2) => r1 != r2})
        this.state = {
            dataSource: ds.cloneWithRows(arrData)
        };
        this.getItem();
    }

    render() {
        return (
            <ListView
                showsVerticalScrollIndicator={false}
                style={styles.rootView}
                renderRow={this.renderRow}
                dataSource={this.state.dataSource}>
            </ListView>
        );
    }

    renderRow(data, sid, rid, hr) {
        return (
            <View style={styles.itemView}>
                <Image source={arrImage[rid]} style={styles.itemImage}/>
                <View>
                    <Text
                        numberOfLines={2}
                        style={styles.itemTextName}>{data.name}</Text>
                    <Text style={styles.itemTextMoney}>{'¥' + data.money}</Text>
                </View>
            </View>
        )

    }

    getItem() {
        arrImage[0] = require('../data/car00.jpg');
        arrImage[1] = require('../data/car01.jpg');
        arrImage[2] = require('../data/car02.jpg');
        arrImage[3] = require('../data/car03.jpg');
        arrImage[4] = require('../data/car04.jpg');
        arrImage[5] = require('../data/car05.jpg');
        arrImage[6] = require('../data/car06.jpg');
        arrImage[7] = require('../data/car07.jpg');
        arrImage[8] = require('../data/car08.jpg');
        arrImage[9] = require('../data/car09.jpg');
        arrImage[10] = require('../data/car10.jpg');
        arrImage[11] = require('../data/car11.jpg');
        arrImage[12] = require('../data/car12.jpg');
        arrImage[13] = require('../data/car13.jpg');
        arrImage[14] = require('../data/car14.jpg');
        arrImage[15] = require('../data/car15.jpg');
        arrImage[16] = require('../data/car16.jpg');
        arrImage[17] = require('../data/car00.jpg');
        arrImage[18] = require('../data/car00.jpg');
        arrImage[19] = require('../data/car00.jpg');
        arrImage[20] = require('../data/car00.jpg');
        arrImage[21] = require('../data/car01.jpg');
        arrImage[22] = require('../data/car02.jpg');
        arrImage[23] = require('../data/car03.jpg');
        arrImage[24] = require('../data/car04.jpg');
        arrImage[25] = require('../data/car05.jpg');
        arrImage[26] = require('../data/car06.jpg');
        arrImage[27] = require('../data/car07.jpg');
        arrImage[28] = require('../data/car08.jpg');
        arrImage[29] = require('../data/car09.jpg');
        arrImage[30] = require('../data/car00.jpg');
        arrImage[31] = require('../data/car01.jpg');
        return arrImage;
    }
}

const styles = StyleSheet.create({
    rootView: {
        flex: 1,
        backgroundColor: '#E5FCFF',
    },
    itemView: {
        flexDirection: 'row'
    },
    itemImage: {
        width: 120,
        marginTop: 10,
        marginLeft: 10,
        height: 80,
    },
    itemTextName: {
        width:320,
        marginTop: 10,
        marginLeft: 10,
        fontSize: 18,
    },
    itemTextMoney: {
        marginLeft: 10,
        fontSize: 15,
        position: 'absolute',
        color: 'red',
        bottom: 2,
    },
});
